<template>
<Row :gutter="30">
	<Col :xs="{ span: isPhone?24:19, offset: 0 }">
		<div class="bigtitle">
			<div class="bigtitle-title">{{ title }}</div>
		</div>

		<custom-spin :status=page.loadingStatus style="height:50vh;"></custom-spin>
		<Row v-for="(item, index) in items" :key="index" :gutter="20" bdb-gray4 pdy3 mgt3>
			<Col v-if="item.picture" :sm="{ span: 24, offset: 0 }" :md="{ span: 10, offset: 0 }" text-center>
				<p @click="handleGoToDetail(item)" :title=item.title>
					<background-image style="height:190px;max-width:480px;width:100%;" linkable bd-gray4 :value="item.picture"></background-image>
				</p>
			</Col>
			<Col :sm="{ span: 24, offset: 0 }" :md="{ span: item.picture?14:24, offset: 0 }">
				<p mgt2 linkable @click="handleGoToDetail(item)" sz1 :title=item.title>{{item.title}}</p>
				<p gray3 mgt2>
					<span v-if="item.author" mgr2><Icon type="ios-person" mgr1 />文/{{item.author}}</span>
					<span mgr2><Icon type="md-time" mgr1 />{{formatTimeStr(item.creationTime, 'YYYY-MM-DD')}}</span>
					<span><Icon type="md-eye" mgr1 />{{formatClickCount(item.clickCount)}}</span>
				</p>
				<p gray3 mgt2>{{ellipsis(item.description, 100)}}</p>
				<p text-right mgt2>
					<span pdy1 pdx2 bd-circle bd-gray3 linkable @click="handleGoToDetail(item)" mgr1>Read More</span>
				</p>
			</Col>
		</Row>

    	<AutoPage v-if="page.totalCount" :value="page" :auto="false" :show-sizer=false text-right mgt2></AutoPage>
	</Col>

	<Col v-if="!isPhone" :xs="{ span: 5, offset: 0 }">
		<div class="bigtitle">
			<div class="bigtitle-title">为您推荐</div>
		</div>

		<div v-for="(item, index) in recommendedPage.items" :key=index>
			<p @click=handleGoToDetail(item) mgt2 gray1 long linkable>{{item.title}}</p>
		</div>
	</Col>
	
</Row>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import AutoPage from '@common/components/AutoPage';
import util from '../../lib/util'
import BackgroundImage from '@common/components/background-image'
import CustomSpin from '../../components/common/custom-spin.vue'
import Page from '@common/models/Page'


@Component({
    components: { AutoPage, BackgroundImage, CustomSpin }
})
export default class ArticleList extends AbpBase{
	systemType = -1;
	recommendedPage:Page = new Page('/api/services/app/Home/GetArticleRecommendeds').pageSize(8);
	get page() {
		return this.$store.state.websiteInfo.articlePage;
	}
	get items() {
		return this.page.items;
	}
	get title() {
		return ['文章列表', '公司资讯', '微课堂', '企业通知'][this.systemType];
	}
	formatClickCount(count) {
		if(count < 10000) {
			return count;
		}else {
			var temp= Math.floor(count / 10000);
			return `${temp}万`;
		}
	}
	handleGoToDetail(item) {
		this.$router.push({
			name: 'article-detail',
			params: {
				id: item.id,
				systemtype: item.systemType.toString()
			}
		});
	}
	init() {
		this.systemType = parseInt(this.$route.params.systemtype);
		this.page.items = [];
		this.page.action_data.systemType = this.systemType;
		this.page.getData();
		util.title(this.title);
	}
	created() {
		this.init();

		this.recommendedPage.getData();
	}
	@Watch('$route')
	handleOnRouteChange() {
		this.init();
	}
}
</script>
